import React, { useEffect, useState } from "react";
import './index.css'
import { Outlet } from "react-router-dom";
import { useNavigate, useLocation } from "react-router";
import { AppstoreOutlined, FileOutlined, PlusOutlined, StarOutlined, EditOutlined, SettingOutlined, InfoCircleOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import navs from '../../utils/nav'
const { Sider, Content } = Layout;
let item = [
    { label: '首页', icon: <AppstoreOutlined />, children: null, key: 'manage' },
    {
        label: '数据管理', icon: <FileOutlined />, children: [
            { key: 'userList', label: '用户列表' },
            { key: 'shopList', label: '商家列表' },
            { key: 'foodList', label: '食品列表' },
            { key: 'orderList', label: '订单列表' },
            { key: 'adminList', label: '管理员列表' },
        ], key: 'item-1'
    },
    {
        label: '添加数据', icon: <PlusOutlined />, children: [
            { key: 'addShop', label: '添加商铺' },
            { key: 'addGoods', label: '添加商铺' },
        ], key: 'item-2'
    },
    {
        label: '图表', icon: <StarOutlined />, children: [
            { key: 'visitor', label: '用户分布' },
        ], key: 'item-3'
    },
    {
        label: '编辑', icon: <EditOutlined />, children: [
            { key: 'vueEdit', label: '文本编辑' },
        ], key: 'item-4'
    },
    {
        label: '设置', icon: <SettingOutlined />, children: [
            { key: 'adminSet', label: '管理员设置' },
        ], key: 'item-5'
    },
    {
        label: '说明', icon: <InfoCircleOutlined />, children: [
            { key: 'explain', label: '说明' },
        ], key: 'item-6'
    },
]
export default function Index() {
    let navigate = useNavigate();
    let location = useLocation();
    let [navArr, setNavArr] = useState([])
    let [navTb, sterTb] = useState([])
    function change(val) {
        navigate('/' + val.key)
        // console.log(val.key);
    }
    useEffect(() => {
        navs.forEach(i => {
            if (i.pathname == location.pathname) {
                navArr = i.title;
                setNavArr(navArr)
            }
        })

    });
    return <Layout
        className="site-layout-background"
        style={{
            height: "100vh",
        }}
    >
        <Sider className="site-layout-background" width={256} >
            <Menu
                theme='dark'
                mode="inline"
                onClick={change}
                style={{
                    height: '100%',
                    color: '#bfcbd9'
                }}
                items={item}
            />
        </Sider>



        <Content
            style={{
                minHeight: "100%",
                backgroundColor: '#fff'
            }}
        >
        <Breadcrumb
        style={{
          margin: '16px 0',
        }}
      >
      {
        navArr.map((i, index) => {
            return  <Breadcrumb.Item key={index}>{i}</Breadcrumb.Item>
        })
    }
            </Breadcrumb>
            <Outlet></Outlet>
        </Content>
    </Layout>

}